<template>
  <div class="video-watermark-container">
    <div class="input-section">
      <input 
        v-model="shareUrl" 
        type="text" 
        class="url-input"
        placeholder="请输入视频分享地址"
      >
      <button @click="parseVideo" class="parse-btn">解析</button>
    </div>

    <div v-if="videoUrl" class="video-section">
      <video 
        :src="videoUrl"
        controls
        class="video-player"
      ></video>
      <button @click="downloadVideo" class="download-btn">
        下载视频
      </button>
    </div>
  </div>
</template>

<script>
import { postVideoRemoveWatermarkShare } from '@/api/video'

export default {
  name: 'VideoRemoveWater',
  data() {
    return {
      shareUrl: '',
      videoUrl: '',
        // videoUrl: 'https://tczlld.com/oss/barcodear.mp4'
    }
  },
  methods: {
    async parseVideo() {
      if (!this.shareUrl) {
        alert('请输入视频分享地址')
        return
      }

      try {
        // 显示加载进度条
        uni.showLoading({
          title: '正在解析视频...',
          mask: true
        })

        const response = await postVideoRemoveWatermarkShare({
          url: this.shareUrl
        })
        
        // 隐藏加载进度条
        uni.hideLoading()

        if (response.code === 200 && response.data) {
          this.videoUrl = response.data.url
          uni.showToast({
            title: '解析成功',
            icon: 'success'
          })
        } else {
          uni.showToast({
            title: '解析失败，请检查链接是否正确',
            icon: 'none',
            duration: 2000
          })
        }
      } catch (error) {
        // 发生错误时也要隐藏加载进度条
        uni.hideLoading()
        
        console.error('解析出错:', error)
        uni.showToast({
          title: '解析出错，请稍后重试',
          icon: 'none',
          duration: 2000
        })
      }
    },
    async downloadVideo() {
      if (!this.videoUrl) {
        uni.showToast({ title: '请先解析视频', icon: 'none' });
        return;
      }

      uni.showLoading({ title: '正在下载视频...', mask: true });
      // 使用浏览器原生方法下载视频
      const a = document.createElement('a');
      a.href = this.videoUrl;
      a.download = 'video.mp4';
      a.click();
      // 移除a标签
      a.remove();
      uni.hideLoading();
      uni.showToast({ title: '下载完成', icon: 'success' });
    }

  }
}
</script>

<style scoped>
.video-watermark-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.input-section {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.url-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

.parse-btn {
  padding: 8px 20px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.parse-btn:hover {
  background-color: #66b1ff;
}

.video-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.video-player {
  width: 100%;
  max-width: 800px;
  height: 450px;
  background-color: #000;
}

.download-btn {
  padding: 8px 20px;
  background-color: #67c23a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.download-btn:hover {
  background-color: #85ce61;
}
</style>

<style>
</style>